.regular {
  font-weight: normal;
}

.bold {
  font-weight: bold;
}

.italic {
  font-size: 0.8em;
}

.small-body {
  font-size: 10pt;
}

/* NOTE: The default `accent` class produces
 * a semi-transparent color with separators.
 */
.opaque-accent {
  background: @accent_color;
}

chatfoldericon .unread-mask {
  border-radius: 9999px;
  background-color: @window_bg_color;
  padding: 1px;
}

headerbar .two-line-window-title {
  padding: 0 9px;
  margin: -1px 0;
}

headerbar .unread-label {
  border-radius: 9999px;
  background-color: @dark_2;
  color: @accent_fg_color;
  padding: 0 4px;
  font-size: x-small;
  font-weight: bold;
  font-feature-settings: "tnum";
}

chatfoldericon .unread-label {
  border-radius: 9999px;
  background-color: @accent_bg_color;
  color: @accent_fg_color;
  padding: 0 4px;
  font-size: smaller;
  font-weight: bold;
  font-feature-settings: "tnum";
}

chatfolderbar .navigation-tabbar {
  margin: -3px 5px;
}

chatfolderbar .navigation-tabbar row {
  margin: 0 1px;
  padding: 0;
}

chatfolderbar .navigation-tabbar row chatfolderrow {
  padding: 6px;
}

.unread-count {
  background-color: @accent_bg_color;
  color: @accent_fg_color;
  border-radius: 9999px;
  padding: 2px 6px;
  font-size: small;
  font-weight: bold;
  font-feature-settings: "tnum";
}

.selected-avatar avatar {
  border: 2px solid @accent_bg_color;
}

.blue-checkmark {
  color: @light_1;
  border-radius: 9999px;
  border: solid @accent_bg_color 2px;
  background-color: @accent_bg_color;
}

.online-indicator-mask {
  border-radius: 9999px;
  background-color: @window_bg_color;
  padding: 7px;
}

.online-indicator-dot {
  border-radius: 9999px;
  background-color: @green_4;
  padding: 5px;
}

chatlist row > widget {
  padding: 6px 0;
}

chatlist row minithumbnail {
  border-radius: 3px;
}

chatlist row .unread-mention-count {
  color: @accent_fg_color;
  background-color: @accent_bg_color;
  font-size: smaller;
  font-weight: bold;
  min-width: 1.7em;
  border-radius: 9999px;
  padding: 2px 0px;
}

chatlist row .unread-count {
  font-size: smaller;
}

chatlist row .unread-count-unmuted {
  background-color: @accent_bg_color;
}

chatlist row .unread-count-muted {
  background-color: @light_5;
}

sidebarsearch listview.results-list > row {
  /* Keep in sync with button height */
  min-height: 34px;
}

sidebarsearch listview.results-list > row > widget > sidebarsearchitemrow {
  margin: 6px 0;
}

sidebarsearchitemrow {
  border-spacing: 12px;
}

listview.chat-history {
  background: transparent;
  padding: 3px 0;
}

listview.chat-history > row {
  margin: 2px 4px;
  border-radius: 9px;
}

/* Values for the cairo renderer */
.fallback {
  background: @view_bg_color;
}

.fallback messagebubble:not(.outgoing) {
  background: #f0f0f0;
}

.fallback .event-row {
  background: transparent;
  color: currentColor;
}
/* End of values for cairo renderer */

button.scroll-to-bottom {
  background-color: @window_bg_color;
  box-shadow: 0 1px 3px 0 alpha(black, 0.3);
  margin: 9px;
}

messagebubble {
  background: white;
  border-radius: 15px;
  box-shadow: 0 1px alpha(black, 0.1);
}

messagebubble.outgoing {
  background-color: #ddecff;
}

messagebubble:not(.outgoing):dir(ltr),
messagebubble.outgoing:dir(rtl) {
  margin-right: 38px;
}

messagebubble.outgoing:dir(ltr),
messagebubble:not(.outgoing):dir(rtl) {
  margin-left: 38px;
}

messagebubble.outgoing link,
messagebubble.outgoing messagereply label.message {
  color: @window_fg_color;
}

messagebubble messageindicators {
  opacity: 0.7;
}

messagebubble > box {
  padding: 6px 9px;
}

messagebubble.location map {
  border-radius: 14px;
}

messagebubble.location map,
messagebubble.venue map {
  margin: -4px -7px;
}

messagebubble.location.live-location map,
messagebubble.venue map {
  border-radius: 14px 14px 0 0;
}

messagebubble.location map .license,
messagebubble.venue map .license {
  border-radius: 9999px;
  margin: 3px 6px 0 0;
  padding: 1px 6px;
}

window.location map .license,
window.venue map .license {
  border-radius: 9999px;
  margin: 0 6px 6px 0;
  padding: 1px 6px;
}

messagebubble.location map .marker,
window.location map .marker {
  color: @red_3;
}

messagebubble.venue map iconmapmarker .icon {
  border-radius: 9999px;
  padding: 12px;
  margin-top: 4px;
  background-color: @light_2;
  color: @dark_3;
  -gtk-icon-size: 24px;
}

messagebubble.location map avatarmapmarker .hull,
messagebubble.venue map iconmapmarker .hull,
messagebubble.venue map .marker,
window.venue map .marker,
window.location map avatarmapmarker .hull {
  color: @accent_bg_color;
}

messagebubble.outgoing.location circularprogressbar {
  color: @accent_bg_color;
}

messagebubble.location .suffix,
messagebubble.venue .suffix {
  margin-top: 9px;
}

messagebubble.venue .suffix {
  margin-bottom: 3px;
}

messagebubble.document {
  min-width: 220px;
}

messagebubble.document .file {
  margin: 3px 0;
}

messagebubble.document .sender {
  margin-bottom: 3px;
}

messagebubble.document .file > overlay {
  min-width: 40px;
  min-height: 40px;
}

messagebubble.document .file > overlay > statusindicator > image {
  padding: 12px;
}

messagebubble.document .file > overlay > statusindicator {
  color: @accent_color;
  transition: opacity 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 9999px;
}

messagebubble.document.outgoing .file > overlay > statusindicator {
  /* depends on bubble color */
  color: #79c271;
}

statusindicator > loadingindicator {
  margin: 2px;
}

messagebubble.document .file:hover > overlay > statusindicator {
  opacity: 0.85;
}

messagebubble.document .file:active > overlay > statusindicator {
  opacity: 0.7;
}

messagebubble.document .file.with-thumbnail > overlay > statusindicator {
  background-color: alpha(black, 0.6);
  color: white;
}

messagebubble.document .file.with-thumbnail > overlay {
  min-width: 60px;
  min-height: 60px;
}

messagebubble.document .file.with-thumbnail > overlay > picture {
  border-radius: 6px;
  opacity: 1;
}

messagebubble.media mediapicture {
  min-width: 150px;
  min-height: 100px;
  /* Negate margins to achieve 1px padding with the message bubble */
  margin: -5px -8px;
  /* Message bubble border-radius (15px) - padding (1px)  */
  border-radius: 14px;
}

messagebubble.media.with-reply mediapicture,
messagebubble.location.with-reply map,
messagebubble.venue.with-reply map {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  margin-top: 3px;
}

messagebubble.document .file.with-thumbnail > overlay > picture {
  border-radius: 6px;
}

messagebubble.document .file > overlay > picture {
  transition: filter 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

messagebubble.document .file.with-thumbnail:hover > overlay > picture {
  filter: brightness(1.04);
}

messagebubble.document .file.with-thumbnail:active > overlay > picture {
  filter: brightness(1.08);
}

messagebubble.media.with-label mediapicture {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  margin-bottom: 6px;
}

messageindicators image {
  -gtk-icon-size: 14px;
}

messagebubble.media:not(.with-label) messageindicators,
messagebubble.location messageindicators,
messagesticker messageindicators,
.osd-indicator {
  background-color: alpha(black, 0.4);
  color: white;
  opacity: 1; /* Reset opacity from message bubble */
  border-radius: 9999px;
  padding: 2px 6px;
}

messageindicators,
.osd-indicator {
  font-size: 8pt;
  font-feature-settings: "tnum";
}

messagebubble messagereply {
  margin: 3px 0;
}

messagesticker messagereply {
  background: alpha(currentColor, 0.08);
  border-radius: 6px;
  padding: 3px 6px;
}

messagereply {
  border-spacing: 6px;
}

messagereply separator {
  background-color: currentColor;
}

/* Do not use the sender color */
messagereply label.message {
  color: @window_fg_color;
}

messagesticker {
  border-spacing: 6px;
}

.event-row {
  background-color: alpha(black, 0.2);
  font-size: smaller;
  font-weight: bold;
  color: white;
  border-radius: 9999px;
  padding: 3px 6px;
}

.sender-text-red {
  color: #c03d33;
}

.sender-text-orange {
  color: #ce671b;
}

.sender-text-violet {
  color: #8544d6;
}

.sender-text-green {
  color: #4fad2d;
}

.sender-text-cyan {
  color: #2996ad;
}

.sender-text-blue {
  color: #168acd;
}

.sender-text-pink {
  color: #cd4073;
}

/* Placeholder */
.message-entry > overlay > label {
  margin: 0 9px;
}

.message-entry > overlay > entry > image {
  margin-bottom: 9px;
}

.message-entry > overlay > entry {
  padding: 0 9px;
}

.message-entry > overlay > entry > scrolledwindow > scrollbar {
  box-shadow: none;
  background: none;
}

.message-entry > overlay > entry > scrolledwindow > scrollbar slider {
  min-height: 0;
}

.message-entry > overlay > entry > scrolledwindow > textview {
  background: none;
  color: inherit;
}

.qr-code:disabled {
  filter: opacity(0.5);
}

contactrow {
  border-spacing: 9px;
  margin: 6px 0;
}

window.chat-info .main-page {
  margin: 12px;
  border-spacing: 6px;
}

window.chat-info .main-page > avatar {
  margin-bottom: 6px;
}

window.chat-info .main-page > list {
  margin-top: 12px;
}

.small-pill {
  border-radius: 18px;
}

splitbutton.small-pill:dir(ltr) > button,
splitbutton.small-pill:dir(rtl) > menubutton > button {
  border-top-left-radius: 18px;
  border-bottom-left-radius: 18px;
}

splitbutton.small-pill:dir(rtl) > button,
splitbutton.small-pill:dir(ltr) > menubutton > button {
  border-top-right-radius: 18px;
  border-bottom-right-radius: 18px;
}
